<script lang="ts">
	import { createEventDispatcher } from "svelte";

	export let selectedTags: { documentType?: string; chartType?: string } = {};
	const dispatch = createEventDispatcher();

	// 颜色顺序
	const colors = ["#836796", "#a58db3", "#879db6", "#6d9bad", "#a8b7db", "#b1a9da"];

	// 选项数据
	const documentTypes = [
		"需求文档",
		"设计文档",
		"开发文档",
		"测试文档",
		"部署文档",
		"项目管理",
	];
	const chartOptions = {
		需求文档: ["流程图", "框图", "架构图",],
		设计文档: ["架构图", "时序图", "类图", "E-R 图", "数据流图","状态图"],
		开发文档: ["时序图", "数据流图", "模块依赖图"],
		测试文档: ["测试流程图", "覆盖率图", "测试进度图"],
		部署文档: ["部署架构图", "部署流程图"],
		项目管理: ["甘特图", "燃尽图", "任务流程图","资源分配图","版本更新图"],
	};

	// 获取颜色
	function getColor(index: number) {
		return colors[index % colors.length]; // 直接返回hex颜色
	}

	// 十六进制转RGBA
	function hexToRgba(hex: string, alpha = 0.2) {
		const rgb = hex.match(/\w\w/g)?.map(x => parseInt(x, 16));
		return rgb ? `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${alpha})` : hex;
	}

	// 选择文档类型
	function selectDocumentType(type: string) {
		selectedTags = { documentType: type, chartType: undefined };
		dispatch("update", selectedTags);
	}

	// 选择图表类型
	function selectChartType(chart: string) {
		if (selectedTags.documentType) {
			selectedTags = { ...selectedTags, chartType: chart };
			dispatch("update", selectedTags);
		}
	}

	// 移除标签
	function removeTag(key: "documentType" | "chartType") {
		selectedTags = { ...selectedTags, [key]: undefined };
		dispatch("update", selectedTags);
	}
</script>

<style>
	.tag {
		display: flex;
		align-items: center;
		padding: 4px 12px;
		/* border-radius: 50px; */
        border-radius: 50px;
		border-width: 2px;
	}

	.tag .remove-btn {
		margin-left: 6px;
		font-size: 14px;
		cursor: pointer;
	}
</style>

<div class="mb-2">
	{#if !selectedTags.documentType}
		<p class="text-gray-500">请选择文档类型:</p>
		<div class="flex flex-wrap gap-2">
			{#each documentTypes as type, index}
				<button
					class="rounded px-3 py-1 text-white transition hover:opacity-80"
					style="background-color: {colors[index % colors.length]};border-radius: 30px;"
					on:click={() => selectDocumentType(type)}
				>
					{type}
				</button>
			{/each}
		</div>
	{/if}

	{#if selectedTags.documentType && !selectedTags.chartType}
		<p class="mt-2 text-gray-500">适合的图表类型:</p>
		<div class="flex flex-wrap gap-2">
			{#each chartOptions[selectedTags.documentType] as chart, index}
				<button
					class="rounded px-3 py-1 text-white transition hover:opacity-80"
					style="background-color: {colors[index % colors.length]};;border-radius: 30px;"
					on:click={() => selectChartType(chart)}
				>
					{chart}
				</button>
			{/each}
		</div>
	{/if}

	{#if selectedTags.documentType}
		<div class="mt-2 flex flex-wrap gap-2">
			{#if selectedTags.documentType}
				<span
					class="tag"
					style="
						border-color: {getColor(documentTypes.indexOf(selectedTags.documentType))}; 
						color: {getColor(documentTypes.indexOf(selectedTags.documentType))};
						background-color: {hexToRgba(getColor(documentTypes.indexOf(selectedTags.documentType)), 0.2)};
					">
					{selectedTags.documentType}
					<button
						class="remove-btn"
						style="color: {getColor(documentTypes.indexOf(selectedTags.documentType))};"
						on:click={() => removeTag("documentType")}>×</button>
				</span>
			{/if}

			{#if selectedTags.chartType}
				<span
					class="tag"
					style="
						border-color: {getColor(chartOptions[selectedTags.documentType].indexOf(selectedTags.chartType))};
						color: {getColor(chartOptions[selectedTags.documentType].indexOf(selectedTags.chartType))};
						background-color: {hexToRgba(getColor(chartOptions[selectedTags.documentType].indexOf(selectedTags.chartType)), 0.2)};
					">
					{selectedTags.chartType}
					<button
						class="remove-btn"
						style="color: {getColor(chartOptions[selectedTags.documentType].indexOf(selectedTags.chartType))};"
						on:click={() => removeTag("chartType")}>×</button>
				</span>
			{/if}
		</div>
	{/if}
</div>
